<template>
<div class="shang">购物车</div>
<hr>
<el-table :data="tableData" style="width: 100%" max-height="500">
    <el-table-column fixed prop="日期" label="日期" width="150" />
    <el-table-column prop="名字" label="名字" width="120" />
    <el-table-column prop="状态" label="状态" width="120" />
    <el-table-column prop="价格" label="价格" width="120" />
    <el-table-column prop="地址" label="地址" width="600" />
    <el-table-column prop="快递单号" label="快递单号" width="120" />
    <el-table-column fixed="right" label="删除" min-width="120">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="deleteRow(scope.$index)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button class="mt-4" style="width: 100%" @click="onAddItem">
   添加
  </el-button>
</template>
<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'

const now = new Date()

const tableData = ref([
  {
    日期: '2016-05-01',
    名字: 'sdkjfis',
    状态: '已收货',
    价格: '160',
    地址: '湖南省长沙市岳麓区怀旧服加快速度久啊是否离开',
    快递单号: '7875484865565998756',
  },
  {
    日期: '2016-05-02',
    名字: 'kfajslf',
    状态: '待发货',
    价格: '1020',
    地址: '湖南省邵阳市啊橘势大好覅哦啊阿斯加德覅哦啊',
    快递单号: '5644856665487456',
  },
  {
    日期: '2016-05-03',
    名字: 'Tomasfsaf',
    状态: '运输中',
    价格: '4564',
    地址: '广东省东莞市啊上岛咖啡还说我收到覅哦发生的',
    快递单号: '156465646546',
  },
])

const deleteRow = (index) => {
  tableData.value.splice(index, 1)
}

const onAddItem = () => {
  now.setDate(now.getDate() + 1)
  tableData.value.push({
    日期: dayjs(now).format('YYYY-MM-DD'),
    名字: 'Tom',
    状态: 'California',
    价格: '5555',
    地址: '啊大开杀戒覅时间久啊是佛阿是啊较大',
    快递单号: '5485548645',
  })
}
</script>
<style scoped>
.shang{
    font-size: 30px;
    color: dodgerblue;
    margin-left: 100px;
}
/*  */

</style>